@import "~colors.scss";

.daily-tasks {
  .task-form-container {
    font-size: 1.3em;
    margin-top: 7px;
    background-color: transparent;
    .task-form {
      display: flex;
    }
    input#taskName {
      font-size: 1em;
      font-family: Arial, sans-serif;
      margin-right: 5px;
      padding: 10px 12px;
      border: 1px solid $new-color-2;
      background-color: transparent;
      color: $new-color-1;
    }
    input#taskName::-webkit-input-placeholder {
      color: #36A74F;
    }
    select#taskType {
      margin-right: 5px;
      background-color: transparent;
      border: 1px solid $new-color-2;
      color: $new-color-1;
      width: 200px;
      padding-left: 10px;
      font-size: 1em;
      > option {
        padding: 10px;
        background-color: $color-background;
      }
    }
    button[type="button"] {
      font-size: 1em;
      padding: 10px 12px;
      border: 1px solid $new-color-1;
      background-color: $new-color-1;
      color: $color-background;
    }
    button[disabled] {
      border: 1px solid darken($new-color-1, 35%);
      background-color: darken($new-color-1, 35%);
      cursor: not-allowed;
    }
  }

  // Add task form wrapper animations
  .addDailyFormWrapper-enter-active, .addDailyFormWrapper-leave-active {
    transition: max-height 0.3s ease-in, margin-top 0.3s ease-in;
  }
  .addDailyFormWrapper-enter, .addDailyFormWrapper-leave-to {
    max-height: 0;
    margin-top: 0;
  }
  .addDailyFormWrapper-enter-to, .addDailyFormWrapper-leave {
    max-height: 70px;
  }

  .ani-hidden {
    opacity: 0;
    transition: opacity .2s;
  }
  .ani-shown {
    opacity: 1;
    transition: opacity .5s
  }

  // Add task form animation
  .addDailyForm-enter-active {
    transition: opacity 0.5s;
  }
  .addDailyForm-enter {
    opacity: 0;
  }

  .tasks-header {
    height: 53px;
    overflow-y: hidden;
    h2 {
      color: $new-color-3;
    }
  }
}

.ctrl-panel {
  margin-top: 7px;
  .ctrl-wrapper {
    margin-left: 459px;
    width: 600px;
    display: flex;
    justify-content: center;
  }
  input.add-btn {
    font-size: 25px;
    padding: 5px 40px 5px 10px;
    border: none;
    box-sizing: border-box;
    width: 185px;
    cursor: pointer;
    color: $color-secondary-2-4;
    background-color: $color-secondary-2-1;
    background-image: url("~images/add.svg");
    background-repeat: no-repeat;
    background-size: 27px;
    background-position: 105px 8px;
  }
  input.add-btn:hover {
    padding: 3px 38px 3px 8px;
    border: 2px solid #C0D4B4;
    background-position: 103px 6px;
  }
  .add-inputs {
    width: 100%;
    height: 128px;
    font-size: 1.3em;
    border: 1px solid $rgba-secondary-1-2;
    box-sizing: border-box;
    background-color: $color-primary-4;
    display: inline-block;
    div.form-input {
      margin-top: 10px;
      color: $light-font;
      padding: 6px;
      input[type="text"] {
        width: 490px;
        font-size: 20px;
        border: 1px solid $color-secondary-2-1;
        color: $color-secondary-2-1;
        padding: 5px 10px;
        background-color: $color-primary-4;
      }
      input[type="button"].submit-btn {
        font-size: 24px;
        border: none;
        display: inline-block;
        padding: 5px 8px;
        cursor: pointer;
        margin-right: 14px;
        background-color: #afb234;
      }
      input[type="button"].submit-btn:hover {
        background-color: $color-secondary-2-1;
      }
    }
    div.form-input:last-child {
      margin-bottom: 10px;
    }
  }
}